import {AfterViewInit, Component} from '@angular/core';
import {SharedModule} from '../shared.module';
import * as echarts from 'echarts';

@Component({
  selector: 'chart',
  imports: [
    SharedModule
  ],
  templateUrl: './chart-list.component.html',
  standalone: true
})
export class ChartListComponent implements AfterViewInit {

  constructor(
  ) {}

  ngAfterViewInit(): void {
    this.displayChart1()
    this.displayChart2()
  }

  displayChart1() {
    const chartDom = document.getElementById('chart1');
    const myChart = echarts.init(chartDom);
    const option = {
      // 设置标题
      title: {
        text: '招聘岗位数量',
        subtext: '2022',
        left: 'center',
        textStyle: {
          fontSize: 20,
          color: '#333'
        }
      },
      xAxis: {
        type: 'category',
        data: ['前端开发工程师', '服务端开发工程师', '产品经理', '测试工程师', '数据分析师', '产品经理', 'UI设计师'],
        axisLabel: {
          rotate: 45
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };

    myChart.setOption(option);
  }

  displayChart2() {
    const chartDom = document.getElementById('chart2');
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: '应聘者入职数量',
        subtext: '仅供参考',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '应聘者入职数量',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 15, name: '前端开发工程师' },
            { value: 26, name: '服务端开发工程师' },
            { value: 6, name: '产品经理' },
            { value: 4, name: '测试工程师' },
            { value: 11, name: '数据分析师' },
            { value: 9, name: '产品经理' },
            { value: 3, name: 'UI设计师' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    myChart.setOption(option);
  }
}
